<template>
  <j-modal
    :confirmLoading="confirmLoading"
    :dialogStyle="dialogStyle"
    :title="title"
    :visible="visible"
    :width="750"
    cancelText="关闭"
    switchFullscreen
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="地区">
          <a-select
            v-decorator="[
              'area',
              {
                rules: [
                  {
                    required: true,
                    message: '地区不能为空!',
                  },
                ],
              },
            ]"
            placeholder="请选择地区"
            @change="handleChange"
          >
            <a-select-option value="全市">全市</a-select-option>
            <a-select-option value="各区平均">各区平均</a-select-option>
            <a-select-option value="黄浦区">黄浦区</a-select-option>
            <a-select-option value="徐汇区">徐汇区</a-select-option>
            <a-select-option value="长宁区">长宁区</a-select-option>
            <a-select-option value="静安区">静安区</a-select-option>
            <a-select-option value="普陀区">普陀区</a-select-option>
            <a-select-option value="虹口区">虹口区</a-select-option>
            <a-select-option value="杨浦区">杨浦区</a-select-option>
            <a-select-option value="闵行区">闵行区</a-select-option>
            <a-select-option value="宝山区">宝山区</a-select-option>
            <a-select-option value="嘉定区">嘉定区</a-select-option>
            <a-select-option value="浦东新区">浦东新区</a-select-option>
            <a-select-option value="金山区">金山区</a-select-option>
            <a-select-option value="松江区">松江区</a-select-option>
            <a-select-option value="青浦区">青浦区</a-select-option>
            <a-select-option value="奉贤区">奉贤区</a-select-option>
            <a-select-option value="崇明区">崇明区</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="年份">
          <a-select
            v-decorator="[
              'year',
              {
                rules: [
                  {
                    required: false,
                    message: '请选择年份!',
                  },
                ],
              },
            ]"
            placeholder="请选择年份"
          >
            <a-select-option v-for="(i, index) in yearList" :key="index" :value="i.key">{{ i.name }} </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="月份">
          <a-select
            v-decorator="[
              'monthStr',
              {
                rules: [
                  {
                    required: false,
                    message: '请选择月份!',
                  },
                ],
              },
            ]"
            placeholder="请选择月份"
          >
            <a-select-option v-for="(i, index) in monthList" :key="index" :value="i.key">{{ i.name }} </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="全区合计同比增长">
          <a-input
            v-decorator="[
              'totalYoy',
              {
                rules: [
                  {
                    required: true,
                    message: '仅能输入数字和两位小数，不能为空！',
                    pattern: /^-?(?!0\d)\d{1,2}(?:\.\d{1,2})?$/,
                  },
                ],
              },
            ]"
            placeholder="请输入全区合计同比增长百分比"
            suffix="%"
          />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="工业同比增长">
          <a-input
            v-decorator="[
              'industryYoy',
              {
                rules: [
                  {
                    required: false,
                    message: '仅能输入数字和两位小数，不能为空！',
                    pattern: /^-?(?!0\d)\d{1,2}(?:\.\d{1,2})?$/,
                  },
                ],
              },
            ]"
            placeholder="请输入工业同比增长百分比"
            suffix="%"
          />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="其他产业同比增长">
          <a-input
            v-decorator="[
              'otherYoy',
              {
                rules: [
                  {
                    required: false,
                    message: '仅能输入数字和两位小数，不能为空！',
                    pattern: /^-?(?!0\d)\d{1,2}(?:\.\d{1,2})?$/,
                  },
                ],
              },
            ]"
            placeholder="请输入其他产业同比增长百分比"
            suffix="%"
          />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="住宅同比增长">
          <a-input
            v-decorator="[
              'buildYoy',
              {
                rules: [
                  {
                    required: false,
                    message: '仅能输入数字和两位小数，不能为空！',
                    pattern: /^-?(?!0\d)\d{1,2}(?:\.\d{1,2})?$/,
                  },
                ],
              },
            ]"
            placeholder="请输入住宅同比增长百分比"
            suffix="%"
          />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="社会车辆同比增长">
          <a-input
            v-decorator="[
              'carYoy',
              {
                rules: [
                  {
                    required: false,
                    message: '仅能输入数字和两位小数，不能为空！',
                    pattern: /^-?(?!0\d)\d{1,2}(?:\.\d{1,2})?$/,
                  },
                ],
              },
            ]"
            placeholder="请输入社会车辆同比增长百分比"
            suffix="%"
          />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="警示情况">
          <a-select
            v-decorator="[
              'lamp',
              {
                rules: [
                  {
                    required: false,
                    message: '地区不能为空!',
                  },
                ],
              },
            ]"
            placeholder="请选择状态"
            @change="handleChange"
          >
            <a-select-option value="0">红灯</a-select-option>
            <a-select-option value="1">黄灯</a-select-option>
            <a-select-option value="2">绿灯</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import pick from 'lodash.pick'
import { httpAction } from '@api/manage'

const date = new Date()
const count = date.getFullYear() - 2020
const yearList = []
for (let i = 0; i < count + 1; i++) {
  yearList.push({
    name: date.getFullYear() - i,
    key: date.getFullYear() - i,
  })
}

export default {
  name: 'monitorModal',
  data() {
    return {
      showMarkInput: false,
      selectedArea: '',
      confirmLoading: false,
      title: '',
      visible: false,
      form: this.$form.createForm(this),
      yearList: yearList,
      currentYear: new Date().getFullYear(), // 获取当前年份
      monthList: [
        { name: '1-1', key: '1-1' },
        { name: '1-2', key: '1-2' },
        { name: '1-3', key: '1-3' },
        { name: '1-4', key: '1-4' },
        { name: '1-5', key: '1-5' },
        { name: '1-6', key: '1-6' },
        { name: '1-7', key: '1-7' },
        { name: '1-8', key: '1-8' },
        { name: '1-9', key: '1-9' },
        { name: '1-10', key: '1-10' },
        { name: '1-11', key: '1-11' },
        { name: '1-12', key: '1-12' },
      ],
      currentTime: '',
      dialogStyle: {
        top: '300px',
        // right:"20px",
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      validatorRules: {
        totalEnergyConsumption: {
          rules: [{ required: true, trigger: 'change', message: '请输入数字！', pattern: '^\d{1,}\.\d{1,}|\d{1,}]/g' }],
        },
      },
      url: {
        add: '/carbon/earlyWarnPrediction/add',
        edit: '/carbon/earlyWarnPrediction/edit',
      },
    }
  },
  methods: {
    add() {
      this.edit({})
    },
    edit(record) {
      console.log(record)
      this.visible = true
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.$nextTick(() => {
        // 如果record的长度为0
        if (Object.keys(record).length === 0) {
          this.form.setFieldsValue({
            year: this.currentYear.toString(),
          })
        }
        this.form.setFieldsValue(
          pick(
            this.model,
            'area',
            'totalYoy',
            'industryYoy',
            'otherYoy',
            'buildYoy',
            'carYoy',
            'lamp',
            'monthStr',
            'year',
          ),
        )
        //   this.model.areaName去除空格后为全市，那么就显示分数输入框
        // if (this.model.areaName.trim() === '全市') {
        //   this.showMarkInput = false
        // } else {
        //   this.showMarkInput = true
        // }
      })
    },
    handleChange(value) {
      // 更新selectedArea每次地区选择发生变化时
      this.selectedArea = value
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    handleOk() {
      let that = this
      this.form.validateFields((err, values) => {
        if (!err) {
          let httpurl = ''
          let method = ''
          this.confirmLoading = true
          console.log(this.model)
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'post'
          }
          console.log(httpurl)
          values.status = '0'
          let formData = Object.assign(this.model, values)
          console.log(formData)
          httpAction(httpurl, formData, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('refresh')
              } else {
                that.$message.error(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
              that.$parent.$parent.loadData()
            })
        }
      })
    },
  },
}
</script>

<style scoped></style>
